<template>
  <el-dialog
    :title="
      dialogData.type == 'DISABLE'
        ? '禁用语言'
        : dialogData.type == 'ENABLE'
        ? '启用语言'
        : '删除语言'
    "
    :visible.sync="dialogData.show"
    width="520px"
    append-to-body
  >
    <div class="dialog-root">
      <p
        style="font-size: 20px; font-weight: bold; margin: 0"
        :style="{
          color:
            dialogData.type == 'DISABLE'
              ? '#FA8C16FF'
              : dialogData.type == 'ENABLE'
              ? '#52C41AFF'
              : '#FF000DFF',
        }"
      >
        {{
          dialogData.type == "DISABLE"
            ? "确认禁用此语言?"
            : dialogData.type == "ENABLE"
            ? "确认启用此语言?"
            : "确认删除此语言?"
        }}
      </p>
      <div class="content-root" style="margin-top: 16px">
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px"
            >语言名称（中文）：</span
          >
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.chineseName
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px"
            >语言名称（本国语）：</span
          >
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.nativeName
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px"
            >ISO 639 语言代码：</span
          >
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.i18nCode
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">默认语言：</span>
          <span style="color: #030617d9; font-size: 14px">{{
            dialogData.defaultI18n ? "是" : ""
          }}</span>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">状态：</span>
          <span
            style="color: #030617d9; font-size: 14px"
            :style="{
              color: dialogData.status == 'DISABLE' ? '#FA8C16FF' : '#52C41AFF',
            }"
            >{{ dialogData.status == "DISABLE" ? "已禁用" : "已启用" }}</span
          >
        </div>
      </div>
      <p
        style="
          color: #ff000dff;
          font-size: 12px;
          margin: 0;
          margin-top: 14px;
          margin-left: 16px;
        "
        v-if="dialogData.type == 'ENABLE'"
      >
        注：后台所有已发布的内容，请尽快完成对该语言的补充！
      </p>
      <div class="line-center">
        <el-button class="dialog-btn" @click="dialogCancel" plain
          >取消</el-button
        >
        <el-button
          v-if="dialogData.type == 'DISABLE'"
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="warning"
          v-preventReClick
          >禁用</el-button
        >
        <el-button
          v-if="dialogData.type == 'DEL'"
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="danger"
          v-preventReClick
          >删除</el-button
        >
        <el-button
          v-if="dialogData.type == 'ENABLE'"
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="success"
          v-preventReClick
          >启用</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
//接口
import { enableLang, disableLang, delLang } from "@/api/lang_manage";

export default {
  props: {
    dialogData: {
      type: Object,
    },
  },
  data() {
    return {
      floorPoints: [],
      pointerList: [],
      mapPicUrl: "",
    };
  },
  watch: {
    "dialogData.show": {
      immediate: true,
      handler: function (val, oldVal) {
        if (val) {
        }
      },
    },
  },
  methods: {
    //关闭弹窗,仅关闭
    closeDialog() {
      this.dialogData.show = false;
    },
    //取消按钮
    dialogCancel() {
      this.dialogData.show = false;
    },
    //确认按钮
    dialogConfirm() {
      switch (this.dialogData.type) {
        case "ENABLE": {
          //启用
          this.handleEnableLang();
          break;
        }
        case "DISABLE": {
          //禁用
          this.handleDisableLang();
          break;
        }
        case "DEL": {
          //删除
          this.handleDelLang();
          break;
        }
        default: {
          this.$message.error("异常弹窗");
          break;
        }
      }
    },
    //启用语言
    handleEnableLang() {
      enableLang({
        i18nId: this.dialogData.id,
      })
        .then((response) => {
          this.$message.success("启用成功");
          this.$emit("dialogConfirm");
          this.dialogData.show = false;
        })
        .catch(() => {});
    },
    //禁用语言
    handleDisableLang() {
      disableLang({
        i18nId: this.dialogData.id,
      })
        .then((response) => {
          this.$message.success("禁用成功");
          this.$emit("dialogConfirm");
          this.dialogData.show = false;
        })
        .catch(() => {});
    },
    //删除语言
    handleDelLang() {
      delLang({
        i18nId: this.dialogData.id,
      })
        .then((response) => {
          this.$message.success("删除成功");
          this.$emit("dialogConfirm", "DEL");
          this.dialogData.show = false;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__title {
    font-weight: normal;
  }
}

.dialog-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-root {
  width: 100%;
  padding: 16px;
  padding-top: 0;
  background: #fbfbfc;
  border-radius: 8px;
}

.line-between {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.line-center {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-btn {
  height: 32px;
  width: 120px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>